<template>
  <div>
    <div id="map_container"/>
    <div class="zlp-control">
      <el-button @click="big()">放大一级</el-button>
      <el-button @click="small()">缩小一级</el-button>
    </div>
  </div>
</template>
<script>
import {lazyBMapApiLoaderInstance} from 'vue-bmap-gl'
import mapvgl from 'mapvgl'
import mapv from 'mapv'

export default {
  data () {
    return {
      map: null,
      centerPoint: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15,
      mapType: 'BMAP_EARTH_MAP'
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    small () {
      this.map.zoomOut()
    },
    big () {
      this.map.zoomIn()
    },
    NavigationControl3D () {
      // eslint-disable-next-line no-undef
      var navi3DCtrl = new BMapGL.NavigationControl3D() // 添加3D控件
      this.map.addControl(navi3DCtrl)
    },
    LocationControl () {
      // 创建定位控件
      // eslint-disable-next-line no-undef
      var locationControl = new BMapGL.LocationControl({
        // 控件的停靠位置（可选，默认左上角）
        // anchor: 'BMAP_ANCHOR_TOP_RIGHT',
        // 控件基于停靠位置的偏移量（可选）
        // eslint-disable-next-line no-undef
        // offset: new BMapGL.Size(20, 20)
      })
      // 将控件添加到地图上
      this.map.addControl(locationControl)

      // 添加定位事件
      locationControl.addEventListener('locationSuccess', function (e) {
        var address = ''
        address += e.addressComponent.province
        address += e.addressComponent.city
        address += e.addressComponent.district
        address += e.addressComponent.street
        address += e.addressComponent.streetNumber
        alert('当前定位地址为：' + address)
      })
      locationControl.addEventListener('locationError', function (e) {
        alert(e.message)
      })
    },
    // 准备数据源
    initData () {
      // 生成的数据信息
      let data = []
      // 城市数据信息
      let cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
        '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
        '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口']
      // 需要定义 700 个 data 的数据项
      let randomCount = 100
      while (randomCount--) {
        // 获取每一个城市的中心点坐标 随机生成  在 所有城市范围内挑选 生成的随机数是 [0,cities.length] 创建开始开始城市和终点城市
        let start = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
        let end = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
        // 创建贝塞尔曲线对象
        let curve = new mapvgl.BezierCurve()
        // 根据起点和终点生成贝塞尔曲线坐标集
        curve.setOptions(
          {
            start: [start.lng, start.lat],
            end: [end.lng, end.lat]
          }
        )
        let curveData = curve.getPoints()
        // 3. 创建data数据
        data.push(
          {
            geometry: {
              type: 'LineString',
              coordinates: curveData
            }
          }
        )
      }
      return data
    },
    // 绘制数据源
    setData (map, data) {
      // 创建图层管理器
      let view = new mapvgl.View(
        {map}
      )
      let flyLineLayer = new mapvgl.FlyLineLayer(
        {
          // 飞线动画方式  normal，默认值，飞线动画速度均匀  chaos，飞线动画速度不均匀
          style: 'chaos',
          // 底线颜色
          color: 'rgba(33, 242, 214, 0.3)',
          // 飞线动画的颜色
          textureColor: 'red',
          // 飞线动画的宽度
          textureWidth: 20,
          // 飞线动画的长度，占整条线的百分比，取值0-100
          textureLength: 10,
          // 飞线动画的步长，步长越大动画速度越快 默认值 0.1
          step: 0.1
        }
      )
      view.addLayer(flyLineLayer)
      flyLineLayer.setData(data)
    },
    init () {
      lazyBMapApiLoaderInstance.load().then(() => {
        // eslint-disable-next-line no-undef
        const GL = BMapGL
        this.map = new GL.Map('map_container', {
          minZoom: 5,
          maxZoom: 20
        }) // 创建Map实例
        this.map.centerAndZoom(new GL.Point(this.centerPoint.lng, this.centerPoint.lat), this.zoom)
        this.map.enableScrollWheelZoom(true)
        this.map.setMapType(this.mapType)
        this.NavigationControl3D()
        this.LocationControl()

        this.setData(this.map, this.initData())
      })
    }
  }
}
</script>
<style scoped>
#map_container {
  width: 100%;
  height: 100vh;
}

.zlp-control {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 100;
}
</style>
